<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #imglist img{
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <h1>图片延迟加载</h1>
    <hr>


    <div id="imglist">
        <img data-src="../图片/1.jpg">
        <img data-src="../图片/2.jpg">
        <img data-src="../图片/3.jpg">
        <img data-src="../图片/4.jpg">
        <img data-src="../图片/5.jpg">
    </div>

    <script>
        setTimeout(function(){
            var imgs = document.getElementById('imglist').children;

            //遍历
            
            for(var i = 0; i < imgs.length; i++){
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
        },2000);
    </script>
</body>
</html>